<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
request.setAttribute("path", path);
%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="${path}/js/jquery-1.12.3.js"></script>
<link rel="stylesheet" href="${path}/css/easyui.css" />
<link rel="stylesheet" href="${path}/css/icon.css" />
<script type="text/javascript" src="${path}/js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${path}/js/easyui-lang-zh_CN.js"></script>



<!-- 	<script> 
	 function myLoadFilter(data, parent) {//扩展，注意导入循序，一定要放在easyui框架下面
            var opt = $(this).data().tree.options;
            var idFiled, textFiled, parentField;
            if (opt.parentField) {
                idFiled = opt.idFiled || 'id';
                textFiled = opt.textFiled || 'text';
                parentField = opt.parentField;
                var i, l, treeData = [], tmpMap = [];
                for (i = 0, l = data.length; i < l; i++) {
                    tmpMap[data[i][idFiled]] = data[i];
                }
                for (i = 0, l = data.length; i < l; i++) {
                    if (tmpMap[data[i][parentField]] && data[i][idFiled] != data[i][parentField]) {
                        if (!tmpMap[data[i][parentField]]['children'])
                            tmpMap[data[i][parentField]]['children'] = [];
                        data[i]['text'] = data[i][textFiled];
                        tmpMap[data[i][parentField]]['children'].push(data[i]);
                    } else {
                        data[i]['text'] = data[i][textFiled];
                        treeData.push(data[i]);
                    }
                }
                return treeData;
            }
            return data;
        };
    </script>
    
    <script>
    $(function () {//只需要配置parentField为你生成的扁平数据中的父id键名称即可。
        
        
        $('#tree').tree({ 
        	url: "${path}/Tree/json1.html", 
        	parentField: "fatherid", 
        	method:"post" ,
        	textFiled:"text",
        	idField:"id",
        	onClick:function(node){
      if(node.text=="大孙子"){
  $.ajax({
  type:"post",
  dataType:"json",
  url:"${path}/Tree/json2.html",
  success:function(data){
  alert(data);
  },
  error:function(){
  
  }
  
  
  });
      
      }
    
        
        	}
        	 
        
        });
    });
</script> -->

<script type="text/javascript">
$(function(){
  $("#Mytree").tree({
  url:"${path}/Tree/json3.html",
 onClick:function(node){
/* alert(node.text); */
 }
  });

});

</script>
</head>

<body>
	<!--  <ul id="Mytree" data-options="lines:true,animate:true">    </ul>  -->
	<table class="easyui-treegrid" style="width:600px;height:250px"
		data-options="
				url: '${path}/Tree/json3.html',
				lines: true,
				rownumbers: true,
				idField: 'id',
				animate:true,
				treeField: 'name'
			">
		<thead>
			<tr>
				<th data-options="field:'name'" width="200">Name</th>
				<th data-options="field:'size'" width="200" align="right">Size</th>
				<th data-options="field:'date'" width="150">Modified Date</th>
			</tr>
		</thead>
	</table>

</body>
</html>
